<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		*{ margin: 0px; padding: 0px;}
	</style>
	<body>
		<canvas id="myCanvas" style="background: #000000;"></canvas>
	</body>
</html>
<script src="utils.js"></script>
<script src="ball.js"></script>
<script>
	
	window.onload = function(){
		console.log( Math.PI*2);
		var canvas = document.getElementById('myCanvas');
		var ctx = canvas.getContext('2d');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		var ball = new Ball();
		ball.x = canvas.width/2;
		ball.y = canvas.height/2;
		var angle = 0, range = 5, xSpeed = 5, ySpeed = 0.05;
		var radius = 100; // 定义半径
		var radiusY = 50;
        var speed =0.05; // 每帧旋转角度的增加值
		(function drawFrame(){
			window.requestAnimationFrame(drawFrame, canvas);
			ctx.clearRect(0, 0, canvas.width, canvas.height);
//			ball.x += xSpeed;
//			if(ball.x > canvas.width + ball.radius){
//             ball.x = -ball.radius;
//         }
//			ball.y = canvas.height/2+Math.sin(angle)*range;


//			ball.scaleX = ball.scaleY = Math.sin(angle) * range;

			ball.x = canvas.width/2 + Math.sin(angle) * radius;
			ball.y = canvas.height/2 + Math.cos(angle) * radiusY;
			
			angle += .05;
			ball.draw(ctx);
			
		}())
		
	}
	
	
</script>
